<script setup lang="ts">
import { reqHospitalDoctor, reqHospitalWork } from '@/apis/hospital';
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import type { DocArr, Doctor, DoctorResponseData, HospitalWordData } from '@/apis/hospital/type';


const pageNo = ref<number>(1)
const limit = ref<number>(6)
const workData = ref<any>({})
const workTime = ref<any>({})
const docArr = ref<DocArr>([])
const $router = useRouter()
const $route = useRoute()
onMounted(() => {
  fetchWorkData()
})

const fetchWorkData = async () => {
  let res: HospitalWordData = await reqHospitalWork(
    pageNo.value,
    limit.value,
    $route.query.hoscode as string,
    $route.query.depcode as string
  ); console.log(res);
  if (res.code === 200) {
    workData.value = res.data
    workTime.value = workData.value.bookingScheduleList[0]
    getDoctorWorkDay()
  }
}

// 获取医生排班信息
const getDoctorWorkDay = async () => {
  const res:DoctorResponseData = await reqHospitalDoctor(
    $route.query.hoscode as string,
    $route.query.depcode as string,
    workTime.value.workDate
  )
  if(res.code == 200){
    docArr.value = res.data
  }
}

const changeDay = (item:any) =>{
  workTime.value = item
  getDoctorWorkDay()
}

// 计算排班的医生数据
let moringArr = computed (() => {
  return docArr.value.filter((doc:Doctor) => {
    return doc.workTime == 0
  })
})

let afternoonArr = computed (() => {
  return docArr.value.filter((doc:Doctor) => {
    return doc.workTime == 1
  })
})

// 进入选择就诊人页面
const goChose = (item:Doctor) => {
  $router.push({
    path:'/hospital/registerChose',
    query:{docId:item.id}
  })
}
</script>



<template>
  <div class="wrap">
    <div class="top">
      <div class="hosname">{{ workData.baseMap?.hosname }}</div>
      <div class="message">{{ workData.baseMap?.bigname }} · {{ workData.baseMap?.depname }}</div>
    </div>
    <div class="center">
      <h3 class="time">{{ workData.baseMap?.workDateString }}</h3>
      <div class="container">
        <div class="item" v-for="item in workData.bookingScheduleList" :key="item"
          :class="{ active: item.status == -1 || item.availableNumber == -1, click: item.workDate==workTime.workDate }"
          @click="changeDay(item)">
          <div class="item_top">{{ item.workDate }}-{{ item.dayOfWeek }}</div>
          <div class="item_bottom">
            <div v-if="item.status == -1">停止挂号</div>
            <div v-if="item.status == 0">
              {{ item.availableNumber == -1 ? '已约满' : `可挂号(${item.availableNumber})` }}
            </div>
            <div v-if="item.status == 1">即将放号</div>
          </div>
        </div>
      </div>
      <div class="example-pagination-block">
        <el-pagination v-model:current-page="pageNo" layout="prev, pager, next" :total="workData.total"
          style="margin-top: 30px;" @current-change="fetchWorkData" />
      </div>
    </div>
    <div class="bottom">
      <!-- 即将放号 -->
      <div class="will" v-if="workTime.status==1">
        <span>{{workTime.workDate}}</span>
        <span>放号</span>
      </div>
      <div class="doctor" v-else>
        <div class="morning">
          <div class="tips">
            <svg t="1734612662809" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="11020" width="18" height="18">
              <path
                d="M513.3 239.9c-73.5 0-142.6 28.6-194.6 80.6-52 52-80.6 121.1-80.6 194.6s28.6 142.6 80.6 194.6c52 52 121.1 80.6 194.6 80.6s142.6-28.6 194.6-80.6c52-52 80.6-121.1 80.6-194.6s-28.6-142.6-80.6-194.6c-52-52-121.1-80.6-194.6-80.6z m0 482.3c-114.2 0-207.2-92.9-207.2-207.2S399 307.8 513.3 307.8c114.2 0 207.2 92.9 207.2 207.2s-92.9 207.2-207.2 207.2z m124.6 81.4H388.7c-18.8 0-34 15.2-34 34s15.2 34 34 34h249.2c18.8 0 34-15.2 34-34s-15.2-34-34-34zM588.1 885H438.6c-18.8 0-34 15.2-34 34s15.2 34 34 34h149.5c18.8 0 34-15.2 34-34s-15.2-34-34-34z m-74.8-657.5c18.8 0 34-15.2 34-34V97c0-18.8-15.2-34-34-34s-34 15.2-34 34v96.5c0 18.7 15.2 34 34 34z m188 49.4c5.9 4.2 12.7 6.2 19.5 6.2 10.7 0 21.3-5.1 27.9-14.5l55.3-79c10.8-15.4 7-36.6-8.3-47.4-15.4-10.8-36.6-7-47.4 8.3l-55.3 79c-10.8 15.4-7.1 36.6 8.3 47.4zM938 357.6c-6.6-17.6-26.2-26.5-43.8-19.9l-90.4 33.8c-17.6 6.6-26.5 26.2-19.9 43.8 5.1 13.7 18.1 22.1 31.9 22.1 4 0 8-0.7 11.9-2.2l90.4-33.8c17.6-6.6 26.5-26.2 19.9-43.8zM283.4 252.5c6.6 9.4 17.2 14.5 27.9 14.5 6.7 0 13.5-2 19.5-6.2 15.4-10.8 19.1-32 8.3-47.4l-55.3-79c-10.8-15.4-32-19.1-47.4-8.3-15.4 10.8-19.1 32-8.3 47.4l55.3 79z m-35.3 146.6c6.6-17.6-2.4-37.2-19.9-43.8l-90.4-33.8c-17.6-6.6-37.2 2.4-43.8 19.9-6.6 17.6 2.4 37.2 19.9 43.8l90.4 33.8c3.9 1.5 7.9 2.2 11.9 2.2 13.8 0 26.8-8.4 31.9-22.1z"
                p-id="11021" fill="#1296db"></path>
            </svg>
            <span>上午号源</span>
          </div>
          <div class="doc_info" v-for="item in moringArr" :key="item.id">
            <div class="info_left">
              <span>{{item.title}}</span>
              <span>|</span>
              <span>{{ item.docname }}</span>
              <div class="skill">
                {{item.skill}}
              </div>
            </div>
            <div class="info_right">
              <div class="money">￥{{ item.amount }}</div>
              <el-button type="primary" size="default" style="width: 50%;" @click="goChose(item)">剩余{{ item.availableNumber }}</el-button>
            </div>
          </div>
        </div>

        <div class="afternoon">
          <div class="tips">
            <svg t="1734612662809" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="11020" width="18" height="18">
              <path
                d="M513.3 239.9c-73.5 0-142.6 28.6-194.6 80.6-52 52-80.6 121.1-80.6 194.6s28.6 142.6 80.6 194.6c52 52 121.1 80.6 194.6 80.6s142.6-28.6 194.6-80.6c52-52 80.6-121.1 80.6-194.6s-28.6-142.6-80.6-194.6c-52-52-121.1-80.6-194.6-80.6z m0 482.3c-114.2 0-207.2-92.9-207.2-207.2S399 307.8 513.3 307.8c114.2 0 207.2 92.9 207.2 207.2s-92.9 207.2-207.2 207.2z m124.6 81.4H388.7c-18.8 0-34 15.2-34 34s15.2 34 34 34h249.2c18.8 0 34-15.2 34-34s-15.2-34-34-34zM588.1 885H438.6c-18.8 0-34 15.2-34 34s15.2 34 34 34h149.5c18.8 0 34-15.2 34-34s-15.2-34-34-34z m-74.8-657.5c18.8 0 34-15.2 34-34V97c0-18.8-15.2-34-34-34s-34 15.2-34 34v96.5c0 18.7 15.2 34 34 34z m188 49.4c5.9 4.2 12.7 6.2 19.5 6.2 10.7 0 21.3-5.1 27.9-14.5l55.3-79c10.8-15.4 7-36.6-8.3-47.4-15.4-10.8-36.6-7-47.4 8.3l-55.3 79c-10.8 15.4-7.1 36.6 8.3 47.4zM938 357.6c-6.6-17.6-26.2-26.5-43.8-19.9l-90.4 33.8c-17.6 6.6-26.5 26.2-19.9 43.8 5.1 13.7 18.1 22.1 31.9 22.1 4 0 8-0.7 11.9-2.2l90.4-33.8c17.6-6.6 26.5-26.2 19.9-43.8zM283.4 252.5c6.6 9.4 17.2 14.5 27.9 14.5 6.7 0 13.5-2 19.5-6.2 15.4-10.8 19.1-32 8.3-47.4l-55.3-79c-10.8-15.4-32-19.1-47.4-8.3-15.4 10.8-19.1 32-8.3 47.4l55.3 79z m-35.3 146.6c6.6-17.6-2.4-37.2-19.9-43.8l-90.4-33.8c-17.6-6.6-37.2 2.4-43.8 19.9-6.6 17.6 2.4 37.2 19.9 43.8l90.4 33.8c3.9 1.5 7.9 2.2 11.9 2.2 13.8 0 26.8-8.4 31.9-22.1z"
                p-id="11021" fill="#1296db"></path>
            </svg>
            <span>下午号源</span>
          </div>
          <div class="doc_info" v-for="item in afternoonArr" :key="item.id">
            <div class="info_left">
              <span>{{item.title}}</span>
              <span>|</span>
              <span>{{ item.docname }}</span>
              <div class="skill">
                {{item.skill}}
              </div>
            </div>
            <div class="info_right">
              <div class="money">￥{{ item.amount }}</div>
              <el-button type="primary" size="default" style="width: 50%;" @click="goChose(item)">剩余{{ item.availableNumber }}</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>



<style scoped lang="scss">
.wrap {
  margin-top: 30px;

  .top {
    color: #7f7f7f;
    display: flex;

    .hosname {
      padding-right: 10px;
      border-right: 1px solid #6d6a6a;
    }

    .message {
      margin-left: 10px;
    }
  }

  .center {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .time {
      text-align: center;
      font-size: 16px;
    }

    .container {
      display: flex;
      margin-top: 40px;
      // justify-content: space-between;
      width: 100%;

      .item {
        flex: 1;
        border: 2px solid skyblue;
        margin: 0 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: all 0.3s;
        cursor: pointer;

        &.active {
          border: 2px solid #ccc;
          color: #ccc;
        }

        &.click{
          transform: scale(1.1);
        }

        .item_top {
          // font-size: 14px;
          color: #7f7f7f;
          width: 100%;
          text-align: center;
          height: 30px;
          line-height: 30px;
          background-color: #e8f2ff;
        }

        .item_bottom {
          width: 100%;
          height: 60px;
          line-height: 60px;
          text-align: center;
        }
      }
    }
  }

  .bottom {
    margin-top: 20px;

    .will {
      text-align: center;
      font-size: 30px;
      font-weight: 900;
    }

    .doctor {
      .morning, .afternoon {
        margin-top: 30px;
        .tips {
          display: flex;
          align-items: center;
          color: #7f7f7f;
          font-weight: 700;
        }

        .doc_info {
          display: flex;
          justify-content: space-between;
          margin: 10px 0;
          border-bottom: 1px solid #ccc;

          .info_left {
            color: skyblue;
            margin: 10px 0;

            span {
              margin: 0 5px;
              font-size: 20px;
              font-weight: 700;
            }

            .skill {
              margin: 10px 0 10px 5px;
              color: #7f7f7f;
            }
          }

          .info_right {
            width: 150px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px 0;

            .money {
              color: #7f7f7f;
              font-size: 20px;
              // font-weight: 900;
            }
          }
        }
      }
    }
  }
}
</style>